<template>
  <div class="form__container">
    <FormTitle>基本信息</FormTitle>
    <t-form
      ref="basicInfoRef"
      :rules="pageData.formRules"
      :disabled="props.readOnly"
      :data="pageData.localData"
      :labelWidth="120"
    >
      <t-space direction="vertical" style="width: 100%" size="large">
        <t-form-item label="供应商编号" name="providerNo">
          <div class="form__text">{{ pageData.localData.providerNo }}</div>
        </t-form-item>
        <t-form-item label="中文名称" name="name">
          <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.name" maxlength="100" />
          <div v-else class="form__text">{{ pageData.localData.name }}</div>
        </t-form-item>
        <t-form-item label="中文简称" name="nickName">
          <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.nickName" maxlength="100" />
          <div v-else class="form__text">{{ pageData.localData.nickName }}</div>
        </t-form-item>
        <t-form-item label="中文经营地址" name="address">
          <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.address" maxlength="100" />
          <div v-else class="form__text">{{ pageData.localData.address }}</div>
        </t-form-item>
        <t-form-item label="客户英文名称" name="englishName">
          <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.englishName" maxlength="100" />
          <div v-else class="form__text">{{ pageData.localData.englishName }}</div>
        </t-form-item>
        <t-form-item label="客户英文地址" name="englishAddress">
          <t-input
            :showLimitNumber="true"
            v-if="!readOnly"
            v-model="pageData.localData.englishAddress"
            maxlength="100"
          />
          <div v-else class="form__text">{{ pageData.localData.englishAddress }}</div>
        </t-form-item>
        <t-row justify="space-around">
          <t-col :span="4">
            <t-form-item :labelWidth="120" label="国家/地区" name="country">
              <InputSelect
                @onClick="
                  () => {
                    pageData.region.show = true;
                    getRegionData();
                  }
                "
                placeholder="点击右边按钮选择"
                v-if="!readOnly"
                :value="pageData.localData.countryName"
              />
              <div v-else class="form__text">{{ pageData.localData.countryName }}</div>
            </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item
              :labelWidth="120"
              label="省份"
              name="province"
              help="如果为外国，则填写该国对应的二级行政区（例如美国的州）"
            >
              <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.province" maxlength="100" />
              <div v-else class="form__text">{{ pageData.localData.province }}</div>
            </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item :labelWidth="120" label="地市" name="city">
              <t-input :showLimitNumber="true" v-if="!readOnly" v-model="pageData.localData.city" maxlength="100" />
              <div v-else class="form__text">{{ pageData.localData.city }}</div>
            </t-form-item>
          </t-col>
        </t-row>

        <t-form-item label="主营业务" name="mainBusiness">
          <t-textarea v-if="!readOnly" v-model="pageData.localData.mainBusiness" :autosize="{ minRows: 5 }" />
          <div v-else class="form__text">{{ pageData.localData.mainBusiness }}</div>
        </t-form-item>

        <t-form-item label="客户市场" name="market">
          <t-textarea v-if="!readOnly" v-model="pageData.localData.market" :autosize="{ minRows: 5 }" />
          <div v-else class="form__text">{{ pageData.localData.market }}</div>
        </t-form-item>

        <!-- <t-form-item label="备注" name="remark">
          <t-textarea v-model="pageData.localData.remark" :autosize="{ minRows: 5 }" />
        </t-form-item> -->
      </t-space>
    </t-form>
  </div>
  <SelectTable
    v-if="pageData.region.show"
    :loading="pageData.region.loading"
    title="选择国家/地区"
    :showDialog="pageData.region.show"
    width="60vw"
    rowSelectionType="single"
    :tableData="pageData.region.data.records"
    :columns="regionColumns"
    @onConfirm="handleRegionConfirm"
    @onCancel="handleRegionClose"
    :pagination="pageData.region.pagination"
    @page-change="handleRegionPageChange"
    :filter-value="pageData.region.filterValue"
    @filter-change="handleRegionFilterChange"
  />
</template>

<script setup lang="ts">
// 框架和组件库
import { reactive, ref, watch } from "vue";
import { type FormInstanceFunctions } from "tdesign-vue-next";

// TS 类型文件
import type { ISelectTableGroups } from "@/types";

// 常量
import { PAGINATION_VALUE } from "@/common/constants";

// API
import { getRegionList } from "@/api/region";

// 业务数据
import { tableColumns as regionColumns } from "@/pages/Dashboard/Info/Region/components/columns";

const props = defineProps(["formData", "readOnly"]);
const emits = defineEmits(["updateData", "onValidateResult"]);

const basicInfoRef = ref<FormInstanceFunctions | null>(null);

const pageData = reactive({
  formRules: {
    name: [{ required: true, message: "请输入名称", type: "error", trigger: "blur" }],
    nickName: [{ required: true, message: "请输入简称", type: "error", trigger: "blur" }],
    address: [{ required: true, message: "请输入地址", type: "error", trigger: "blur" }],
    country: [{ required: true, message: "请输入国家/地区", type: "error", trigger: "blur" }],
    province: [{ required: true, message: "请输入省份", type: "error", trigger: "blur" }],
    mainBusiness: [{ required: true, message: "请输入内容", type: "error", trigger: "blur" }],
    market: [{ required: true, message: "请输入内容", type: "error", trigger: "blur" }]
  },
  localData: { ...props.formData },
  region: {
    show: false,
    loading: false,
    data: {},
    filterValue: {
      countryName: ""
    },
    pagination: {
      pageSize: 20,
      total: 0,
      current: 1
    }
  } as ISelectTableGroups
});

const getRegionData = async () => {
  pageData.region.loading = true;
  const resultData = await getRegionList(
    pageData.region.pagination.current,
    pageData.region.pagination.pageSize,
    pageData.region.filterValue
  );
  if (resultData.code === 200) {
    pageData.region.data = resultData.data;
    pageData.region.pagination.total = resultData.data.total;
    pageData.region.pagination.current = resultData.data.current;
    pageData.region.pagination.pageSize = resultData.data.size;
    pageData.region.loading = false;
  }
};

const handleRegionConfirm = (e: Record<string, any>) => {
  pageData.localData.country = e.options.currentRowData.id;
  pageData.localData.countryName = e.options.currentRowData.countryName;
  pageData.region.show = false;
};

const handleRegionClose = () => {
  pageData.region.show = false;
};

const handleRegionFilterChange = (filters: Record<string, any>) => {
  pageData.region.filterValue = filters;
  pageData.region.pagination = structuredClone(PAGINATION_VALUE);
  getRegionData();
};

const handleRegionPageChange = (pageInfo: Record<string, any>) => {
  // console.log(pageInfo, newDataSource);
  pageData.region.pagination.pageSize = pageInfo.pageSize;
  pageData.region.pagination.current = pageInfo.current;
  getRegionData();
};

const getFormValidateResult = async () => {
  return await basicInfoRef?.value?.validateOnly();
};

watch(
  () => pageData.localData,
  (newData) => {
    emits("updateData", newData);
    emits("onValidateResult", getFormValidateResult());
  },
  { deep: true, flush: "post" }
);
</script>
